{% extends "base.html" %}

{% block content %}
<h3>Todo Details</h3>

<form class="col s12" action="/edit_todo/{{ todo.id }}" method="post">
  <div class="row">
    <div class="input-field col s6">
      <input disabled value="{{ todo.id }}" id="task_id" type="text" class="validate">
      <label class="active" for="task_id">ID</label>
    </div>
    <div class="input-field col s6">
      <input disabled value="{{ todo.weekly }}" id="disabled" type="text" class="validate">
      <label for="disabled">Weekly</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s6">
      <input disabled value="{{ todo.created_at }}" id="disabled" type="text" class="validate">
      <label for="disabled">CreatedAt</label>
    </div>
    <div class="input-field col s6">
      <input disabled value="{{ todo.updated_at }}" id="disabled" type="text" class="validate">
      <label for="disabled">UpdatedAt</label>
    </div>
  </div>

  <div class="row">
    <div class="input-field col s6">
      <select name="privilege">
        <option value="Low" {% if todo.privilege=="Low" %}selected{% endif %}>Low</option>
        <option value="Mid" {% if todo.privilege=="Mid" %}selected{% endif %}>Mid</option>
        <option value="High" {% if todo.privilege=="High" %}selected{% endif %}>High</option>
      </select>
      <label>Privilege</label>
    </div>
    <div class="input-field col s6">
      <select name="completed">
        <option value="True" {% if todo.completed %}selected{% endif %}>Yes</option>
        <option value="False" {% if not todo.completed %}selected{% endif %}>No</option>
      </select>
      <label>Completed</label>
    </div>
  </div>


  <div class="row">
    <div class="input-field col s12">
      <input value="{{todo.task}}" id="input_text" type="text" class="validate" name="new_task" data-length="128">
      <label class="active" for="input_text">Task</label>
    </div>
  </div>

  <div class="row">
    <div class="input-field col s12">
      <textarea id="textarea1" class="materialize-textarea" name="new_description"
        data-length="512">{{ todo.description }}</textarea>
      <label class="active" for="textarea1">Description</label>
    </div>
  </div>
  <div class="row">
    <div class="col s6">
      <button class="btn waves-effect waves-light" type="submit" name="action">
        Submit
      </button>
    </div>
    <div class="col s6">
      <a href="{{ url_for('delete', todo_id=todo.id) }}" class="waves-effect waves-light btn">Delete</a>
    </div>
  </div>
</form>

{% endblock %}



{% block scripts %}
<script>
  $(document).ready(function () {
    $('input#input_text, textarea#textarea1').characterCounter();
  });
  document.addEventListener('DOMContentLoaded', function () {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });
  $(document).ready(function () {
    $('select').formSelect();
  });
</script>
{% endblock %}